import React from 'react';
import PropTypes from 'prop-types';
import headLeft from '@/src/assets/comps/other/CardC/headLeft.png';
import headRight from '@/src/assets/comps/other/CardC/headRight.png';
import styles from './style.less';

class CardC extends React.Component {
  // 默认值
  static defaultProps = {
    width: '320px', // 卡片的宽度
    height: '221px', // 卡片的高度
    onClick: () => {}, // 默认无点击事件
    style: {}, // 默认不设置
    cardId: '', // 唯一id默认为空
    Top: '', // 默认不设置
    Content: '', // 默认不设置
    type: 'blue', // 默认蓝色主题 orange橙色主题
  };

  render() {
    const { width, height, style, cardId, Top, Content, onClick, type } = this.props;
    return (
      <div
        className={type == 'blue' ? styles.card_wrap : `${styles.card_wrap} ${styles.card_wrap1}`}
        style={{ ...style, width, height }}
        onClick={() => {
          onClick(cardId);
        }}
      >
        <div id={cardId} className={type == 'blue' ? styles.card_head : `${styles.card_head} ${styles.card_head1}`}>
          {type == 'blue' && <img className={styles.card_head_left} alt='' src={headLeft} />}
          {type == 'blue' && <img className={styles.card_head_right} alt='' src={headRight} />}
          <div className={styles.card_head_top}>{Top}</div>
        </div>
        <div className={styles.card_content}>{Content}</div>
      </div>
    );
  }
}
// props默认值
CardC.propsTypes = {
  cardId: PropTypes.string, // 设置唯一的id
  width: PropTypes.string, // 卡片的宽度
  height: PropTypes.string, // 卡片的高度
  onClick: PropTypes.func, // 按钮点击事件
  Top: PropTypes.object, // 卡片上层显示的元素
  Content: PropTypes.object, // 卡片下层显示的元素
  style: PropTypes.object, // 样式
};
export default CardC;
